<template>
  <el-col :span="span">
    <div class="nav_item">
      <img class="icon" :src="navItem.icon" />

      <el-popover
        placement="top-start"
        title="标题"
        width="200"
        trigger="hover"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
      >
        <a slot="reference" class="nav_link bold" href="#"
          >{{ navItem.name }}
        </a>
      </el-popover>
      <a
        class="nav_link"
        href="#"
        v-for="item in navItem.children"
        :key="item.id"
        >{{ item.name }}
      </a>
    </div>
  </el-col>
</template>

<script>
export default {
  props: {
    navItem: {
      required: true,
    },
    span: {
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
// .nav_item:not(:first-child){
//   margin-left: 130px;
// }
.nav_item {
  background-color: #f8f8f8;
  position: relative;
  float: left;
  font-size: 15px;
  line-height: 42px;
  border-radius: 20px;
  .icon {
    position: absolute;
    height: 20px;
    top: 10px;
    left: 15px;
  }
  .nav_link {
    margin-right: 20px;
  }
  .bold {
    font-weight: 700;
    color: black;
    margin-left: 40px;
  }
  a {
    color: #666;
  }
  a:hover {
    color: red;
  }

  .bold::after {
    position: absolute;
    top: 50%;
    left: 40px;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background-color: #ccc;
    content: "";
  }
}
</style>
